<template>
	<view class="container">
		<!-- 切换tab -->
		<view class="base-tab-wrapper">
			<view class="base-tab" :class="{ active: baseTabIdx === item.id }" @click="switchBaseTab(item.id)"
				v-for="(item) in merchantList" :key="item.id">
				<view class="txt">{{ item.name }}</view>
				<view class="link" />
			</view>
		</view>
		<!--商户信息-->
		<view class="info-wrapper" v-show="baseTabIdx == 0">
			<view class="agent-info-wrapper">
				<view class="label">商户名称</view>
				<view class="value">
					<view>{{ allInfo.merSubName }}</view>

				</view>
			</view>
			<view class="divider" />
			<view class="agent-info-wrapper">
				<view class="label">所属行业</view>
				<view class="value">
					<view>{{ allInfo.majorMcc }}</view>
				</view>
			</view>
			<view class="divider" />
			<view class="agent-info-wrapper">
				<view class="label">经营区域</view>
				<view class="value">
					<view>{{ allInfo.provinceZh }} {{allInfo.cityZh}} {{allInfo.areaInfo}}</view>

				</view>
			</view>
			<view class="divider" />
			<view class="agent-info-wrapper">
				<view class="label">经营地址</view>
				<view class="value">
					<view>{{ allInfo.address }}</view>

				</view>
			</view>
		</view>
		<!--经营者信息-->
		<view class="info-wrapper" v-show="baseTabIdx == 1">
			<view class="imageList">
				<view class="imageLeft">
					<image class="img" :src="allInfo.idCardFront?allInfo.idCardFront.split('?')[0]:''">
					</image>

					<view class="txt-tips">
						身份证人像面
					</view>
				</view>
				<view class="imageRight">
					<image class="img" :src="allInfo.idCardBack?allInfo.idCardBack.split('?')[0]:''">
					</image>

					<view class="txt-tips">
						身份证国徽面
					</view>
				</view>
			</view>
			<view class="agent-info-wrapper">
				<view class="label">姓名</view>
				<view class="value">
					<view>{{ allInfo.lsMerchantName }}</view>

				</view>
			</view>
			<view class="divider" />
			<view class="agent-info-wrapper">
				<view class="label">身份证号</view>
				<view class="value">
					<view>{{allInfo.settleIdCard }}</view>

				</view>
			</view>
			<view class="divider" />
			<view class="agent-info-wrapper">
				<view class="label">证件开始日期</view>
				<view class="value">
					<view>{{allInfo.settleIdCardPeriod?allInfo.settleIdCardPeriod.split("~")[0] :""}}</view>

				</view>
			</view>
			<view class="divider" />
			<view class="agent-info-wrapper">
				<view class="label">证件结束日期</view>
				<view class="value">
					<view>{{allInfo.settleIdCardPeriod?allInfo.settleIdCardPeriod.split("~")[1] :""}}</view>


				</view>
			</view>
			<view class="divider" />
			<view class="agent-info-wrapper">
				<view class="label">联系电话</view>
				<view class="value">
					<view>{{ allInfo.lsMerchantPhone }}</view>

				</view>
			</view>
		</view>
		<!--经营照片-->
		<view class="info-wrapper" v-show="baseTabIdx == 2">
			<view class="imageList">
				<view class="imageLeft">
					<image class="img" :src="allInfo.storefrontImg?allInfo.storefrontImg.split('?')[0]:''">
					</image>

					<view class="txt-tips">
						门头照
					</view>
				</view>
				<view class="imageRight">
					<image class="img" :src="allInfo.ashierImg?allInfo.ashierImg.split('?')[0]:''">
					</image>

					<view class="txt-tips">
						内景照
					</view>
				</view>
			</view>
			<view class="imageList">
				<view class="imageLeft">
					<image class="img" :src="allInfo.premisesImg?allInfo.premisesImg.split('?')[0]:''">
					</image>

					<view class="txt-tips">
						收银台照
					</view>
				</view>
				<view class="imageRight">
					<image class="img" :src="allInfo.handImg?allInfo.handImg.split('?')[0]:''">
					</image>

					<view class="txt-tips">
						手持身份证
					</view>
				</view>
			</view>
		</view>
		<!--费率-->
		<view class="rateBox" v-show="baseTabIdx == 3">
			<view class="tagBox">
				<view class="tagIcon"></view>
				<text>费率</text>
			</view>
			<view class="tableContent">
				<uni-table border stripe emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" width="120">交易类型</uni-th>
						<uni-th align="center" width="120">标准费率(T0)</uni-th>

					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr>
						<uni-td align="center">贷记卡刷卡</uni-td>
						<uni-td align="center">{{ allInfo.ysfCreditCard }}%</uni-td>

					</uni-tr>
					<uni-tr>
						<uni-td align="center">借记卡刷卡</uni-td>
						<uni-td align="center">{{ allInfo.ysfDebitCard }}%</uni-td>

					</uni-tr>
					<uni-tr>
						<uni-td align="center">银联二维码</uni-td>
						<uni-td align="center">{{ allInfo.ysf }}%</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">微信</uni-td>
						<uni-td align="center">{{ allInfo.wechat }}%</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">支付宝</uni-td>
						<uni-td align="center">{{ allInfo.alipay }}%</uni-td>
					</uni-tr>

				</uni-table>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from "vue";
	import {
		showToast
	} from "@/utils/toast";
	import {
		queryMerchants
	} from "@/api/mine.js"
	import {
		useStore
	} from "@/store";
	/** store实例 */
	const store = useStore();
	onLoad(() => {});
	onShow(() => {


		merchantStatus()
	});
	// 基础资料tab切换索引
	let baseTabIdx = ref(0);
	let switchBaseTab = (idx) => {
		baseTabIdx.value = idx;
	}
	let storeInfo = ref({})
	let operatorInfo = ref({})
	let operatorPhoto = ref({})
	let allInfo = ref({})
	const settlementRate = reactive({
		ysfCreditCard: null,
		ysfDebitCard: null,
		ysf: null,
		wechat: null,
		alipay: null
	})
	const merchantList = ref([{
			name: '商户信息',
			id: 0
		},
		{
			name: '经营者信息',
			id: 1
		},
		{
			name: '经营照片',
			id: 2
		},
		{
			name: '结算信息',
			id: 3
		}
	])
	const cardList = ref([{
			label: '贷记卡',
			value: 1
		},
		{
			label: '借记卡',
			value: 2
		}
	])
	// 创建响应式数据  
	const alertDialog = ref();

	// 输入框内容
	let keyword = ref(null);
	let range = ref(["2021-03-8", "2021-4-20"])
	let list = ref()
	let buttons = ref([{
			id: 1,
			label: "微信"
		},
		{
			id: 2,
			label: "支付宝"
		},
		{
			id: 3,
			label: "银行卡"
		}
	])

	function filterEvent() {
		alertDialog.value.open()
	}
	// 选项被选中时
	function itemChecked(item) {

		// 多选
		item.checked = !item.checked;

	}

	function onItemClick() {
		uni.navigateTo({
			url: "/pagesDetail/transactionDetail/index",
		});
	}
	// 查询设备详情
	const merchantStatus = () => {
		console.log("merchantInfo=" + JSON.stringify(store.currentMerchantInfomation))
		queryMerchants(store.currentMerchantInfomation.merchantId)
			.then((res) => {
				// storeInfo.value = res.payload.baseInfo.storeInfo
				// operatorInfo.value = res.payload.baseInfo.operatorInfo
				// operatorPhoto.value = res.payload.baseInfo.operatorPhoto
				// settlementRate.ysfCreditCard = res.payload.settlementRate.ysfCreditCard
				// settlementRate.ysfDebitCard = res.payload.settlementRate.ysfDebitCard
				// settlementRate.ysf = res.payload.settlementRate.ysf
				// settlementRate.wechat = res.payload.settlementRate.wechat
				// settlementRate.alipay = res.payload.settlementRate.alipay
				// console.log("settlementRate", settlementRate)
				allInfo.value = res;
			})
			.catch((err) => {

			});
	}
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>
<style lang="scss"></style>